import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, Dimensions,
  SafeAreaView,ImageBackground,TouchableOpacity,ScrollView,Modal,
  ToastAndroid
} from 'react-native';
import Toast, {DURATION} from 'react-native-easy-toast';
import * as WeChat from 'react-native-wechat'
import {jumpPage} from '../../common/common';
import DeviceStorage from '../../common/DeviceStorage';
import BottomView from './BottomView';
import ShareView from '../../component/ShareView';
import { ConfirmModal,TipModal} from '../../component/Tips';
import {BASEURL, IMGURL} from '../../api/api'
import NoData from '../../component/NoData';
var IMG_URL =  BASEURL+'image/showImage?imageName=';
const {height, width} = Dimensions.get('window');
export default class extends Component{
  static navigationOptions = ({ navigation }) =>{
    return{
      header:null,
      tabBarOnPress: (tab) => {
        tab.jumpToIndex(tab.scene.index)
        console.log('tabBarOnPress')
        navigation.state.params.navigatePress()
      }
    }
  };
  // tab 切换调用方法
  clickTabCallback = () => {
    console.log('----ooooo')
    alert(1)
  }

  constructor(props){
    super(props);
    this.state = ({
      delTempId: '',
      type:2,   // 2-作品  1-草稿  3-收藏
			modal:false,
			shareItem:{},
      draftList:[],
      draft:'2',  //1-草稿   2-作品
      userInfo:{
        nickname:'',
      },
      list:[
        {img:require('../../images/mine/group1.png'),tempTitle: '这是一个标题'},
      ],
      data:[
        // {img:require('../../images/mine/group1.png'),tempTitle: '这是一个标题'},
        // {img:require('../../images/mine/group2.png'),tempTitle: '这是一个标题'},
        // {img:require('../../images/mine/group3.png'),tempTitle: '这是一个标题'},
        // {img:require('../../images/mine/group4.png'),tempTitle: '这是一个标题'},
        // {img:require('../../images/mine/group5.png'),tempTitle: '这是一个标题'},
        // {img:require('../../images/mine/group2.png'),tempTitle: '这是一个标题'},
			],
      collectId: [],//收藏的模板ID,
      activeBtn: [true, true, true, true,false,true,false]
    })
  }
  componentDidMount(){
    this.props.navigation.setParams({ navigatePress: this.clickTabCallback })  // 使用这个来调用this
    DeviceStorage.get('user').then((user)=>{
      if(user){
				let userInfo = JSON.parse(user);
				//alert(userInfo.nickName)
        this.setState({
          userId: userInfo.userId,
          userInfo:userInfo
        },()=>{
          this._getDraftList();
        })
      } 
    })
    // DeviceStorage.get('collect').then((collect)=>{
		// 	let collectId;
    //   if(collect){
    //     collectId = JSON.parse(collect);
    //   } else {
    //     collectId = [];
		// 	}
		// 	this.setState({
		// 		collectId: collectId
		// 	})
    // })
  }
  _getDraftList(){
		this.refs.tipModal._loading();
    fetch(BASEURL+'per/draftList?state='+this.state.draft+'&userId=' + this.state.userId)
    .then(res=>res.json())
    .then(response=>{
			this.refs.tipModal._close();
      //console.log('res',response)
      if(response.succ == '1'){
        response.list.forEach(item => {
          let img = item.tempImg;
          if(img && img.indexOf('http') == -1){
            img = IMG_URL + img;
            item.img = {uri: IMG_URL+item.tempImg}
          } else {
            item.img = {uri: item.tempImg}
          }
        })
        this.setState({
          //draftList: response.list,
          list: response.list
        })
      }
		})
		.catch(err=>{
			this.refs.tipModal._close();
		})
	}
	_getCollData(){
		this.refs.tipModal._loading();
    fetch(BASEURL+'per/collList?userId='+this.state.userId)
    .then(res=>res.json())
    .then(response=>{
      //alert(JSON.stringify(response))
			this.refs.tipModal._close();
      //console.log('res',response)
      if(response.succ == '1'){
        response.list.forEach(item => {
          let img = item.tempImg;
          if(img && img.indexOf('http') == -1){
            img = IMG_URL + img;
            item.img = {uri: img}
          } else {
            item.img = {uri: item.tempImg}
          }
        })
        this.setState({
          list: response.list
        })
      }
		})
		.catch(err=>{
      alert(JSON.stringify(err))
			this.refs.tipModal._close();
		})
  }
  _typeClick(type){
    if(type == 3){ //收藏
      this.setState({
        type: type,
        draft: '-1',
        activeBtn: [true, true, true, true,false,true,true]
      },()=>{
				//this._getDraftList();
				this._getCollData();
      })
    } else if(type == 2){//作品
      this.setState({
        type: type,
        draft: '2',
        activeBtn: [true, true, true, true,false,true,false]
        //list: this.state.draftList
      },()=>{
        this._getDraftList();
      })
    } else { //草稿
      this.setState({
        type: type,
        draft: '1',
        activeBtn: [false, false, false, false,true,true,true]
      },()=>{
        this._getDraftList();
      })
    }
  }
  _goPerson(){
    jumpPage(this.props.navigation,'persCenter');
  }
  _vipCenter(){
    jumpPage(this.props.navigation,'vipCenter',{userInfo:this.state.userInfo});
  }
  _goSetting(){
    jumpPage(this.props.navigation,'setting');
  }
  //编辑
  _editPress(tempId, tempTitle, mp3, tempImg){
    if(this.state.type == 1 || this.state.type == 2){
      jumpPage(this.props.navigation,'tempEdit',{tempId: tempId, 
				mp3: mp3,
				tempImg:tempImg,
        userId: this.state.userId, tempTitle: tempTitle});
    }
  }
  _sharePress(item){
    this.setState({
			modal: true,
			shareItem:item
		})
  }
  _bottomPress(index){
    let item = this.state.shareItem;
    if(index == 0){ //好友分享
      if(!item.mp4){
        this.refs.toast.show("暂无视频，无法分享");
        return;
      }
      WeChat.isWXAppInstalled()
      .then((isInstalled) => {
          if (isInstalled) {
              WeChat.shareToSession({
              title:item.tempTitle,
              description: item.tempDesc,
              thumbImage: item.img.uri,
              type: 'news',
              webpageUrl: BASEURL+'share?tempId='+item.tempId,//item.mp4
            })
          } else {
              Alert.alert('请安装微信');
          }
      });
    } else if(index == 1){//朋友圈分享
      if(!item.mp4){
        this.refs.toast.show("暂无视频，无法分享");
        return;
      }
      WeChat.isWXAppInstalled()
      .then((isInstalled) => {
        if (isInstalled) {
          WeChat.shareToTimeline({
            title:item.tempTitle,
            description: item.tempDesc,
            thumbImage: item.img.uri,
            type: 'news',
            webpageUrl: BASEURL+'share?tempId='+item.tempId,//item.mp4
          })
          .catch((error) => {
            Alert.alert(error.message);
          });
        } else {
          Alert.alert('请安装微信');
        }
      });
    } else if(index == 2){
      //this.refs.toast.show("复制成功");
      ToastAndroid.show('复制成功',ToastAndroid.SHORT)
    } else if(index == 3){
      ToastAndroid.show('收藏成功',ToastAndroid.SHORT)
    } else if(index == 4){
      ToastAndroid.show('编辑',ToastAndroid.SHORT)
    } else if(index == 5){  //预览
      this.setState({modal: false})
      if(this.state.type == 2){ //作品
        jumpPage(this.props.navigation,'tempScan',{tempId:item.tempId, tempTitle:item.tempTitle})
      } else {
        jumpPage(this.props.navigation,'tempDetail',{tempId:item.tempId, tempTitle:item.tempTitle})
      }
      
      //ToastAndroid.show('预览',ToastAndroid.SHORT)
    } else if(index == 6){  //删除
      this.setState({modal: false})
      if(this.state.type == 3){ //收藏，删除收藏
        this._delColl(item.tempId);
      } else {
        this._delPress(item.tempId);
      }
      
      //ToastAndroid.show('删除',ToastAndroid.SHORT)
    }
  }
  //删除收藏
  _delColl(tempId){
    let url = 'per/userCancelColl?tempId=';
    fetch(BASEURL+url+tempId+'&userId='+this.state.userId)
    .then(res=>res.json())
    .then(response=>{
      //console.log(response);
      this.refs.tipModal._close();
      if(response.succ == '1'){
        this.refs.toast.show("删除成功");
        this._getCollData();
      } else {
        this.refs.toast.show("删除失败");
      }
    })
    .catch(err=>{
      this.refs.tipModal._close();
      this.refs.tipModal._error('获取失败',1500);
    })
  }
  //删除草稿
  _delPress(tempId){
    console.log('---'+tempId)
    this.setState({
      delTempId: tempId,
    },()=>{
      this.refs.tipModal2._open('确定要删除吗？');
    })
  }
  _deleteTemp(){
    fetch(BASEURL+'per/deleteDraft?userId=' + this.state.userId + '&tempId='+this.state.delTempId)
    .then(res=>res.json())
    .then(response=>{
      //console.log('res',response)
      if(response.succ == '1'){
        this.refs.toast.show("删除成功");
        this.setState({
          delTempId: '',
        },()=>{
          this._getDraftList();
        })
        this.refs.tipModal2._close();
      }
    })
    
  }
  _renderContent(){
    let {list, type} = this.state;
    //if(type != 3){
      return(
        list.map((item, index) => (
          <Cell  type={this.state.type} key={index}   style={{marginBottom:index==list.length-1?0:0}}
						//press={()=>this._goDetail(item.tempId)}
						navigation={this.props.navigation}
            data={item} sharePress={()=>this._sharePress(item)} 
            deletePress={()=>{this._delPress(item.tempId)}}
            editPress={()=>{this._editPress(item.tempId, item.tempTitle,item.mp3,item.tempImg)}}
            />
        ))
      )
    // } else {
      
    // }
    
  }
  renderMiddleView(){
    let {list, type} = this.state;
    let vip = this.state.userInfo.vip;
    vip = '1';
    if(type != 3){
      if(this.state.list.length == 0){
        return <NoData/>
      } else {
        return(
          <ScrollView style={[styles.scrollView]}>
              <View style={styles.contentView}>
                {this._renderContent()}
              </View>
          </ScrollView>
        )
      }
    } else {
      if(!vip || vip == '0'){
        return(
          <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
            <Text style={{fontSize:16,color:'#999'}}>您还未成为会员，无法享受该权益......</Text>
            <TouchableOpacity style={{marginTop:height/6}}>
              <Text style={{fontSize:16,color:'#00bfff'}}>马上成为VIP会员>></Text>
            </TouchableOpacity>
          </View>
        )
      } else {
        if(this.state.list.length == 0){
          return <NoData/>
        } else {
          return(
            <ScrollView style={[styles.scrollView]}>
              {/*<Text style={{paddingLeft:10,paddingTop:5,paddingBottom:5,marginBottom:-5,color:'#888',}}>回收站作品最多可保存10天，10天后将自动删除</Text>*/}
                <View style={styles.contentView}>
                  {this._renderContent()}
                </View>
            </ScrollView>
          )
        }
      }
    }
  }
  renderShareView(){
    let shareData = [
      {text: '微信',icon: require('../../images/mine/share/icon_wechat.png')},
      {text: '朋友圈',icon: require('../../images/mine/share/icon_friend.png')},
      {text: '复制链接',icon: require('../../images/mine/share/icon_link.png')},
      {text: '收藏',icon: require('../../images/mine/share/icon_coll_nor.png')},
      {text: '编辑',icon: require('../../images/mine/share/icon_edit.png')},
      {text: '预览',icon: require('../../images/mine/share/icon_view.png')},
      {text: '删除',icon: require('../../images/mine/share/icon_del.png')}
    ]
    let view = [];
    let {activeBtn} = this.state;
    //alert(activeBtn)
    for(let i=0; i<shareData.length; i++){
      let item = shareData[i];
      let active = activeBtn[i];
      view.push(
        <View key={i}>
          <TouchableOpacity style={{width:width/4-1,justifyContent:'center',alignItems:'center'}}
            onPress={()=>this._bottomPress(i)} key={i}
            >
            <Image style={{width:width/8,height:width/8,
              margin:10}} source={item.icon}/>
            <Text style={{fontSize:12,color:active?'#333':'#aaa'}}>{item.text}</Text>
          </TouchableOpacity>
          {active?null:
            <View style={{width:width/4,height:width/4,
              top:0,backgroundColor:'rgba(255,255,255,0.2)',zIndex:9999,
              justifyContent:'center',alignItems:'center',
              position:'absolute'}}>
            </View>
          }
        </View>
      )
    }
  
    return view;
  }
  render(){
    let {nickname,vip} = this.state.userInfo;
    let type = this.state.type;
    let vipIcon = require('../../images/mine/icon_vip0.png');
    let vipText = '未开通VIP会员';
    if(vip == '1') {
      vipIcon = require('../../images/mine/icon_vip1.png');
      vipText = "初级VIP会员";
    }else if(vip == '2') {
      vipIcon = require('../../images/mine/icon_vip2.png');
      vipText = "中级VIP会员";
    }else if(vip == '3') {
      vipIcon = require('../../images/mine/icon_vip3.png');
      vipText = "高级VIP会员";
		}
		let headIcon = require('../../images/mine/icon_head.png');
		if(this.state.userInfo.headIcon){
			//alert(this.state.userInfo.headIcon)
			headIcon = {uri: this.state.userInfo.headIcon};
    }
    
    return(
      <SafeAreaView style={{flex:1,paddingTop:0}}>
        <View style={styles.container}>
          <ImageBackground style={styles.topBg} source={require('../../images/mine/top_bg.png')}>
            <View style={styles.headerView}>
              <Text style={styles.leftText}> </Text>
              <Text style={styles.headerText}>个人中心</Text>
              <TouchableOpacity onPress={()=>this._goSetting()}> 
                <Image style={styles.rightImg} source={require('../../images/mine/icon_setting.png')}/>
              </TouchableOpacity>
            </View>
            <View style={styles.topView}>
              <TouchableOpacity style={styles.nameView} activeOpacity={1}>
                <Text style={styles.nameText}>{nickname?nickname:'未设置昵称'}</Text>
                <Image style={{marginLeft:10,width:20,height:20}} source={vipIcon}/>
              </TouchableOpacity>
              <TouchableOpacity onPress={()=>this._vipCenter()}>
                <Text 
                style={{marginLeft:width/3,color:'white',paddingBottom:0}}>{vipText}</Text>
              </TouchableOpacity>
            </View>
          </ImageBackground>
          <View style={styles.slideView}>
              <MiddelView imgStyle={{width:20,height:20}} text='作品' textStyle={{color:this.state.type==2?'#2596ff':'#555'}} press={()=>this._typeClick(2)}
                viewStyle={{borderBottomColor:type==2?'#0066FF':'#fff'}} 
                img={type==2?require('../../images/mine/icon_work_sel.png'):require('../../images/mine/icon_work_nor.png')}/>
              <MiddelView imgStyle={{width:20,height:20}} text='草稿'  textStyle={{color:this.state.type==1?'#2596ff':'#555'}}  press={()=>this._typeClick(1)}
                viewStyle={{borderBottomColor:type==1?'#0066FF':'#fff'}} 
                img={type==1?require('../../images/mine/icon_draft_sel.png'):require('../../images/mine/icon_draft_nor.png')}/>
							<MiddelView imgStyle={{width:20,height:20}} text='收藏'  textStyle={{color:this.state.type==3?'#2596ff':'#555'}} press={()=>this._typeClick(3)}
                viewStyle={{borderBottomColor:type==3?'#0066FF':'#fff'}} 
                img={type==3?require('../../images/mine/icon_coll_sel.png'):require('../../images/mine/icon_coll_nor.png')}/>
              
          </View>
          <TouchableOpacity style={styles.headImgView} activeOpacity={1.0} onPress={()=>this._goPerson()}>
            <Image  style={styles.headImg} source={headIcon}/>
          </TouchableOpacity>
          {
            this.renderMiddleView()
          }
          <Modal animationType='none' 
            transparent={true} 
            visible={this.state.modal} 
            onRequestClose={() => {this.setState({modal:false})}}
            style={styles.modal}
            >
            <View style={styles.bgView}>
              <View style={{flex:1}}></View>
              <View style={{backgroundColor:'rgba(255,255,255,1)',width:'100%',borderColor:'white',
                  borderWidth:StyleSheet.hairlineWidth,borderTopLeftRadius:5,borderTopRightRadius:5}}>
								{/* <ShareView hasClose={true} item={this.state.shareItem}
									toast={this.refs.toast}
									handleClose={()=>{this.setState({modal:false})}}
                /> */}
                <View style={{alignItems:'center',paddingTop:15,paddingBottom:5,
                  }}>
                  <Text>分享到</Text>
                </View>
                <View style={{flexDirection:'row',flexWrap:'wrap'}}>
                  {/* <BottomView type={this.state.type} press={(index)=>{this._bottomPress(index)}}/> */}
                  {this.renderShareView()}
                </View>
                <TouchableOpacity style={{alignItems:'center',backgroundColor:'#E1DFDA',
                  paddingTop:10,paddingBottom:10,marginTop:10}} onPress={()=>{this.setState({modal:false})}}>
                  <Text style={{color:'black'}}>取消</Text>
                </TouchableOpacity>
              </View>
            </View>
						{/* <Toast ref="toast" position='bottom' positionValue={200} /> */}
          </Modal>
        </View>
        <ConfirmModal ref="tipModal2" opacity={0.8}
　　　　　　　　　　confirmFunc={()=>{this._deleteTemp()}} />
				<TipModal ref="tipModal"/>
        <Toast ref="toast" position='bottom' positionValue={200} />
        </SafeAreaView>
    )
  }
}
class Cell extends Component{
  renderBottom(){
    let editImg = require('../../images/mine/icon_edit.png');
    let type = this.props.type;
    if(type == 1){
      return(
        <View style={styles.cellBottom}>
          <TouchableOpacity onPress={this.props.sharePress}>
            <Image  style={styles.editImg} source={editImg}/>
          </TouchableOpacity>
          <TouchableOpacity onPress={this.props.deletePress}>
              <Image style={styles.delImg}  source={require('../../images/mine/icon_del.png')}/>
            </TouchableOpacity>
        </View>
      )
    } else if(type == 2){ //作品
      return(
        <View style={styles.cellBottom}>
          <TouchableOpacity onPress={this.props.sharePress}>
            {/* <Image  style={styles.editImg} source={editImg}/> */}
          </TouchableOpacity>
          {/* <View style={{flexDirection:'row',alignItems:'center'}}>
            <TouchableOpacity onPress={this.props.sharePress} style={{}}>
              <Image  style={styles.shareImg} source={require('../../images/mine/icon_share.png')}/>
            </TouchableOpacity>
            <TouchableOpacity >
              <Text style={{fontSize:12,paddingRight:8,paddingLeft:6}}>官推</Text>
            </TouchableOpacity>
          </View> */}
        </View>
      )
    } else { //收藏
      return(
        <View style={[styles.cellBottom,{justifyContent:'flex-end'}]}>
          {/* <TouchableOpacity onPress={type!=3?this.props.editPress:null}>
            <Image  style={styles.editImg} source={editImg}/>
          </TouchableOpacity> */}
          <View style={{flexDirection:'row'}}>
            <TouchableOpacity onPress={this.props.sharePress} >
                <Image  style={styles.shareImg} source={require('../../images/mine/icon_share.png')}/>
            </TouchableOpacity>
            {/* <TouchableOpacity onPress={this.props.deletePress}>
                <Image style={styles.delImg}  source={require('../../images/mine/icon_del.png')}/>
            </TouchableOpacity> */}
            
          </View>
        </View>
      )
    }
  }
  render(){ 
    let type = this.props.type;
    let editImg = require('../../images/mine/icon_edit.png');
    if(type == 3){
      editImg = require('../../images/mine/icon_restore.png');
    }
		let state = this.props.data.state;
    return(
      <View style={[styles.cellViewStyle,this.props.style,{borderWidth:0,}]}
				
				>
        <TouchableOpacity activeOpacity={0.6}
          onPress={this.props.sharePress}  
        // onPress={()=>{
				// 	let data = this.props.data;
				// 	if(state == 3){
				// 		jumpPage(this.props.navigation,'tempScan',{tempId:data.tempId, tempTitle:data.tempTitle})
				// 	}
				// 	if(type == 3){//收藏
				// 		jumpPage(this.props.navigation,'tempDetail',{tempId:data.tempId,tempTitle:data.tempTitle})
				// 	}
				// }}
        >
        	<Image style={styles.cellImg} source={this.props.data.img}/>
				</TouchableOpacity >
        { state!=2 ? null :
          <TouchableOpacity style={{width:(width-10)/2,height:((width-10)/2)/16*9,
            top:0,backgroundColor:'rgba(0,0,0,0.2)',zIndex:9999,
            justifyContent:'center',alignItems:'center',
            position:'absolute'
          }}
            activeOpacity={0.8}
            onPress={this.props.sharePress}
          >
            <Text style={{color:'white',fontSize:16}}>合成中</Text>
          </TouchableOpacity>
        }
        <Text style={styles.cellText}>{this.props.data.tempTitle}</Text>
        {/*<View style={styles.cellBottom}>*/}
          {/* {this.renderBottom()} */}
        {/*</View>*/}
      </View>
    )
  }
}
class MiddelView extends Component{
  render(){
    return(
      <TouchableOpacity  activeOpacity={0.5} onPress={this.props.press}>
        <View style={[styles.middelView,this.props.viewStyle]}>
          <Image style={this.props.imgStyle} source={this.props.img}/>
          <Text style={[styles.middleText,this.props.textStyle]} >{this.props.text}</Text>
        </View>
        
      </TouchableOpacity>
    )
  }
}
const styles = StyleSheet.create({
  nameView:{
    flexDirection:'row',
  }, 
  modal:{
    flex:1,
    marginTop:40,
  },
  lView:{
    backgroundColor:'white',
    opacity:1,
    borderRadius:5,
    padding:10,
    justifyContent:'center',
    alignItems:'center',
  },
  bgView:{
    flex:1,
    //borderWidth:1,
    justifyContent:'center',
    alignItems:'center',
    backgroundColor:'rgba(0, 0, 0, 0.5)',
    //borderColor:'red'
  },
  editImg:{
    marginLeft:10,
    width:14,
    height:14,
  },
  shareImg:{
    width:14,
    height:14,
  },
  delImg:{
    width:13,
    height:14,
    marginLeft:10,
    marginRight:8,
  },
  cellText:{
    padding:5,
    paddingLeft:8,
    color: '#555'
  },
  cellImg:{
    width:(width-10)/2-10,
    height:((width-10)/2-10)/16*9,
  },
  cellViewStyle:{
    marginTop:15,
    //marginLeft:15,
    width:(width-10)/2,
    backgroundColor:'#fff',
    // borderWidth:StyleSheet.hairlineWidth,
    // borderColor:'black',
		padding:5,
		shadowColor: 'rgba(0, 0, 0, 0.8)',
    shadowOffset: {
        width: 10,
        height: 3
    },
    shadowRadius: 2,
    elevation: 4,
  },
  cellBottom:{
    paddingTop:5,
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    borderTopColor:'#eee',
    borderTopWidth:StyleSheet.hairlineWidth
  },
  contentView:{
    flex:1,
    height:'100%',
    flexDirection:'row',
    flexWrap:'wrap',
    justifyContent:'space-between',
    marginBottom:15,
  },
  scrollView:{
    flex:1,
    marginTop:50,
    // borderWidth:StyleSheet.hairlineWidth,
    // borderColor:'red',
  },
  middleText:{
    paddingTop:4,
    paddingBottom:4,
    fontSize:16,
  },
  middelView:{
    justifyContent:'center',
    alignItems:'center',
    // borderWidth:1,
    // borderColor:'red',
    zIndex:9999,
    borderBottomWidth:2,
  },
  titleText:{
    color:'white',
    fontSize:16,
  },
  nameText:{
    color:'white',
    fontWeight:'bold',
    fontSize:16,
    marginLeft:width/3,
    paddingBottom:0,
  },
  topView:{
    // borderWidth:1,
    // borderColor:'green',
    width:width-30,
    marginTop:10,
    marginLeft:15,
    marginRight:15,
    height:150,
  },
  slideView:{
    paddingTop:30,
    position:'absolute',
    marginLeft:15,
    marginRight:15,
    top:100,
    width:width-30,
    backgroundColor:'#fff',
    flexDirection:'row',
    justifyContent:'space-around',
    alignItems:'center',
    // borderWidth:1,
    // borderColor:'red',
    height:100,
  },
  headImgView:{
    position:'absolute',
    top:45,
    width:80,
    height:80,
    marginLeft:40,
  },
  headImg:{
    width:'100%',
		height:'100%',
		borderRadius:40,
    // borderWidth:1,
    // borderColor:'blue',
    // zIndex:9999,
  },
  leftText:{
    width:20,
    height:20,
    marginLeft:10,
  },
  rightImg:{
    width:20,
    height:20,
    marginRight:10,
  },  
  headerText:{
    color:'white',
    fontSize:18,
  },
  headerView:{
    height:44,
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center'
  },
  topBg:{
		paddingTop:0,
    width:'100%',
    height:150,
    resizeMode:'stretch'
  },
  container: {
    backgroundColor:'#f0f0f0',
    flex: 1,
  },
})